<template>
  <div class="left-top">
    <nav class="title"></nav>
    <main class="main">
      <app-seamless-scroll :single="true" width="100%" height="500px">
        <template v-for="item in array" :key="item.id">
          <nav class="item-content">{{ item.name }}</nav>
        </template>
      </app-seamless-scroll>
    </main>
  </div>
</template>

<script lang="ts" name="LeftTop" setup>
let array = new Array(9).fill({
  id: Math.random(),
  name: '润阳一期年产13GWN型高效太阳能电池片项目' + Math.random(),
})
</script>

<style lang="less" scoped>
.left-top {
  width: 490px;
  height: 511px;
  position: absolute;
  right: 35px;
  top: 484px;
  background: #172342;
  .title {
    width: 450px;
    height: 35px;
    margin: 13.22px 10px 0 10px;
    background-image: url(../assets/right-bottom.svg);
  }

  .main {
    height: 500px;
    padding: 25px 10px 10px 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item-content {
      padding-left: 8px;
      overflow: hidden;
      color: #ededed;
      font-weight: 600;
      height: 60px;
      text-shadow: 0 4px 5px rgba(23, 35, 66, 0.4);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
